<template>
  <div>
    <transition name="fade"
      ><div v-if="isOpen" class="allPage" @click="closeSidebar"></div
    ></transition>

    <div :class="['sidebar', { 'sidebar-open': isOpen }]">
      <div class="sidebar-header">
        <div class="sidebar-logo">R</div>
        <button class="sidebar-close-btn" @click="isOpenSwitch">
          <i class="bi bi-x-lg"></i>
        </button>
      </div>
      <div class="sidebar-content">
        <div class="sidebar-menu" v-for="item in sidebar" :key="'s' + item.id">
          <div class="sidebar-menu-item" @click="handleClick(item)">
            <hr v-if="item.name === 'Replan'" />
            <i :class="`bi ${item.icon}`"></i><span>{{ item.name }}</span>
          </div>
        </div>
        <hr />

        <div class="sidebar-footer">
          <p>Repositories</p>
          <div><i class="bi bi-search"></i></div>
        </div>
        <div
          class="testcase-list"
          v-for="item in testCase"
          :key="'t' + item.id"
        >
          {{ item.name }}
        </div>
        <div class="show-more">show more</div>
      </div>
      <div class="px2">
        <div class="footer">
          <p>@ 2025 GitHub, Inc.</p>
          <div>
            <a href="">Abnout</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TestcaseSidebar",
  props: {
    isOpenSidebar: {
      type: Boolean,
    },
  },
  data() {
    return {
      // isOpen: true,
      isOpen: false,
      sidebar: [
        { id: 1, name: "用例管理", icon: "bi-briefcase" },
        { id: 2, name: "用例集", icon: "bi-house" },
        { id: 3, name: "项目管理", icon: "bi-house" },
        { id: 4, name: "模块管理", icon: "bi-house" },
        { id: 5, name: "测试计划", icon: "bi-house" },
        { id: 6, name: "自动测试", icon: "bi-house" },
        { id: 7, name: "缺陷管理", icon: "bi-house" },
        { id: 8, name: "Replan", icon: "bi-house" },
        { id: 9, name: "任务列表", icon: "bi-house" },
        { id: 10, name: "周视图", icon: "bi-house" },
        { id: 11, name: "纪念日倒计时", icon: "bi-house" },
      ],
      testCase: [
        { id: 1, name: "979368136/local" },
        { id: 2, name: "979368136/open_ui" },
        { id: 3, name: "979368136/UI" },
        { id: 4, name: "979368136/open-api" },
        { id: 5, name: "979368136/vue2" },
      ],
    };
  },
  watch: {
    isOpenSidebar(isOpenSidebar) {
      this.isOpen = isOpenSidebar;
    },
  },
  methods: {
    isOpenSwitch() {
      this.isOpen = !this.isOpen;
      this.$emit("isOpenSidebar2", this.isOpen); // 注意不是 update:
    },
    closeSidebar() {
      this.isOpen = !this.isOpen;
      this.$emit("isOpenSidebar2", this.isOpen); // 注意不是 update:
    },
    handleClick(item) {
      this.$emit("handleClick", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.sidebar {
  display: flex;
  width: 320px;
  flex-direction: column;
  height: 100vh;
  background-color: pink;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  border-radius: 0 8px 8px 0;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  &.sidebar-open {
    transform: translateX(0);
  }
  .sidebar-header {
    padding: 8px 8px 0 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .sidebar-logo {
      padding: 8px 0 6px 8px;
      font-size: 32px;
      line-height: 1;
      font-weight: bold;
    }
    .sidebar-close-btn {
      padding: 8px;
      font-size: 15px;
      line-height: 1;
      transition: all 0.2s ease;
      border-radius: 8px;
    }
  }
  .sidebar-content {
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    .sidebar-footer {
      padding: 0 8px;
      display: flex;
      justify-content: space-between;
    }
  }
  .px2 {
    padding: 0 8px;
    .footer {
      padding: 0 8px;
    }
  }
}

.show-more {
  padding: 0 8px;
}

.sidebar-menu {
  padding: 0 8px;
  .sidebar-menu-item {
    cursor: pointer;
    i {
      margin-right: 10px;
    }
  }
}

.testcase-list {
  padding: 0 8px;
}

.sidebar-close-btn:hover {
  background-color: #0d1117;
}

.allPage {
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  &.allPage-open {
    transform: translateX(0);
  }
  /* 过渡动画 */
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s ease;
  }
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
  .fade-enter-to,
  .fade-leave-from {
    opacity: 1;
  }
}
</style>

<!-- 
<transition name="fade"> 会自动根据类名加上对应的进入和离开阶段的类：
fade-enter-from -> 初始状态透明度0
fade-enter-to -> 目标状态透明度1
fade-leave-from -> 离开时从透明度1开始
fade-leave-to -> 离开时变成透明度0
结合 transition: opacity 0.3s ease;，动画就会平滑过渡。
-->
